<template>
	<div>
		<div class="layout-breadcrumb">
			<Breadcrumb>
			    <BreadcrumbItem to="/">首页</BreadcrumbItem>
			    <BreadcrumbItem href="">管理</BreadcrumbItem>
			    <BreadcrumbItem href="/wechat/manager/user">微信用户</BreadcrumbItem>
			</Breadcrumb>
		</div>
		<div class="layout-content">
		    <div class="layout-content-main">
                <Head ref="head" :searchCallBack="searchCallBack"></Head>
		    	<BaseTable ref="table" :url="table.url" :header="table.header" :selectChange="selectChange" ></BaseTable>
		    </div>
		</div>
        <UpdateRemark ref='updateremark' :callback="resetTable"></UpdateRemark>
	</div>
</template>
<script>
	import {Breadcrumb,Tag,Button} from 'iview';
	
    import BaseTable  from 'admin/components/table/base';

    import Head from 'admin/components/wechat/manager/user/head';
    import UpdateRemark from 'admin/components/wechat/manager/user/modal-update-remark';

	export default{
		components:{
            Breadcrumb,
            'BreadcrumbItem' : Breadcrumb.Item,
            BaseTable,
            Tag,
            Button,
            UpdateRemark,
            Head,
        },
        data () {
            return {
                table:{
                    url : '/wechat/manager/user/view/list',
                    header: []
                },
            }
        },
        methods:{
            //表格重置
        	resetTable(params){
                this.$refs.table.tableData(params);
            },
            //表格选中
            selectChange(data){
                this.$refs.head.choiseData = data;
                if(data.length==0){
                    this.$refs.head.choise = false;
                    return false;
                }
                this.$refs.head.choise = true;
            },
            searchCallBack(params){
                this.resetTable(params);
            }
        },
        created:function(){
            this.table.header =  [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center',
                    fixed: 'left',
                },
                {
                    title: 'openid',
                    key: 'openid',
                    fixed: 'left',
                    width: 230
                },
                {
                    title: '昵称',
                    key: 'nickname',
                    fixed: 'left',
                    width: 100,
                },
                {
                    title: '头像',
                    key: 'headimgurl',
                    fixed: 'left',
                    width: 100,
                    render:(h,params) =>{
                        return h('img',{
                            attrs:{
                                src : params.row.headimgurl+'/64'
                            }
                        });
                    },
                },
                {
                    title: '省份',
                    key: 'province',
                },
                {
                    title: '城市',
                    key: 'city',
                },
                {
                    title: '备注',
                    key: 'remark',
                },
                {
                    title: '关注状态',
                    key: 'subscribe',
                    render:(h, params) => {
                        return h(Tag, {
                            props: {
                                color:  params.row.subscribe==1 ? 'green' : 'red',
                            },
                            
                        },(params.row.subscribe==1 ? '关注-' : '取消关注-') + params.row.subscribeTime.substring(0,params.row.subscribeTime.length-3))
                    },
                    fixed: 'right',
                    width:200,
                },
                {
                    title: '操作',
                    key: 'action',
                    fixed: 'right',
                    width: 150,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h(Button, {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.$refs.updateremark.form.id = params.row.id;
                                        this.$refs.updateremark.form.remark = params.row.remark;
                                        this.$refs.updateremark.modal = true;
                                    }
                                }
                            }, '更新备注'),
                        ]);
                    }
                }
            ];
        },
        mounted:function(){
            this.$store.dispatch('CHANGE_ROUTE',{name:'微信用户',route:'/wechat/manager/user',action:1,closable:true});
        }
	}
</script>